<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 提示框在鼠标移动到指定元素上显示： */

        /* Tooltip 容器 */
        .tooltip {
            position: relative;
            display: inline-block;
            /* 悬停元素上显示点线 */
            border-bottom: 1px dotted black;
        }

        /* Tooltip 文本 */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* 定位 */
            position: absolute;
            z-index: 1;
        }

        /* 鼠标移动上去后显示提示框 */
        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
</head>

<body style="text-align:center;">

    <div class="tooltip">鼠标移动到这
        <span class="tooltiptext">提示文本</span>
    </div>

</body>

</html>
<!-- 实例解析
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。

提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。

CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。

tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。

CSS3 border-radius 属性用于为提示框添加圆角。

:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。 -->